import React from 'react'
import { RouteComponentProps } from 'react-router-dom'
import { inject, observer } from 'mobx-react'
import HomeStore from '../../stores/HomeStory'
import { Collapse, Space } from 'antd'
import GoodsRank from './charts/GoodsRank'
import SalesAmount from './charts/SalesAmount'
import OrderContrast from './charts/OrderContrast'
import UserType from './charts/UserType'
import SalesMoney from './charts/SalesMoney'
import RankList from './charts/RankList'
import '../../config/dark-theme.less'
import './index.less'
interface DashboardInterface extends RouteComponentProps {
  HomeStore: HomeStore
}

const Dashboard: React.FC<DashboardInterface> = (props: DashboardInterface) => {
  return (
    <Space size={14} direction='vertical' style={{ width: '100%' }}>
      <Space
        size={20}
        className='back-div'
        style={{ paddingLeft: 20, paddingRight: 20, width: '100%' }}
      >
        <RankList />
        <UserType />
        <SalesMoney />
      </Space>
      <Collapse ghost>
        <Collapse.Panel
          header='各种类书籍销售情况'
          key='1'
          className='back-div'
        >
          <div className='back-div'>
            <GoodsRank />
          </div>
        </Collapse.Panel>
      </Collapse>
    </Space>
  )
}

export default inject('HomeStore')(observer(Dashboard))
